<template>
    <el-dialog
        v-model="deleteDialogVisible"
        :title="header"
        width="20%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        {{body}}
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="deleteLoading" @click="submitDialog()">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="DeleteDialog">
import {deleteMenuInfo, menuInfoQuery} from "@/request/menu";
import {ElNotification} from "element-plus";
import {computed, defineProps, ref} from "vue";
import {useMenuStore} from "@/stores/menu/menu";

const props = defineProps(['header', 'body', 'deleteData']);

let header = computed(() => {return props['header']});
let body = computed(() => {return props['body']});
let deleteData = computed(() => {return props['deleteData']});

let deleteLoading = ref(false);

let deleteDialogVisible = computed(() => {return useMenuStore().deleteDialog})

function cancelDialog() {
    useMenuStore().resetDeleteDialog(false);
}

function submitDialog() {
    deleteLoading.value = true
    deleteMenuInfo(deleteData.value).then(res => {
        if (res["code"] === '200') {
            ElNotification({
                title: 'Success',
                message: res['message'],
                type: 'success'
            });
            let paramDataInfo = {
                status: '',
                name: '',
                cnName: ''
            }
            menuInfoQuery(paramDataInfo).then(res => {
                useMenuStore().setMenuDataList(res.data);
            })
            useMenuStore().resetDeleteDialog(false);
        } else {
            ElNotification({
                title: 'Error',
                message: res["errorCode"] + ": " + res["message"],
                type: 'error'
            })
        }
        deleteLoading.value = false
    }).catch(res => {
        deleteLoading.value = false
    })
}
</script>

<style scoped>

</style>